<template>
	<view class="page_box">
		<view class="content">
			<view class="top">
				<image src="../../static/imgs/xiaoqu.png" mode=""></image>
				<text>请选择您所在的小区</text>
			</view>
			<view class="peisong">配送范围仅限所选小区</view>
			<view class="srchFor">
				<u-icon name="search" class="tubiao"></u-icon>
				<input
					type="text"
					value=""
					placeholder="请输入您所在的小区"
					placeholder-style="color: #CACACA;"
					@confirm="srchAddr"
					v-model="name"
				/>
			</view>

			<text class="nearby">附近小区</text>
			
			<view class="shequ" v-for="(item,index) in data" :key="index"  @click="dianji(item.sid)">
				<view class="view">
					<image src="../../static/imgs/oooo.png" mode=""></image>
				</view>
				<view class="view1">
					<text>{{item.name}}</text>
					
					<text>{{item.community | msgFormat  }}</text>
				</view>
			</view>
			
		</view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shoprpCoupon from '@/components/shopro-coupon/shopro-coupon.vue';
export default {
	filters:{
		msgFormat:(res)=>{
			console.log('res :>> ', res);  //.replace(',','')	
			return  res.replace(/,/g,'')
		}
	},
	components: {
		shoprpCoupon
	},
	data() {
		return {
			dizhi: '',
			uid: '',
			name: '',
			data: [],
		};
	},
	onShow() {
		this.dizhi = uni.getStorageSync('dizhi');
		uni.removeStorageSync('dizhi');
		console.log('this.dizhi :>> ', this.dizhi);
	},
	onLoad() {
		// 进入不同的tab栏 stManagementMde warehouse
		//this.current = this.$route.query.id;

		//this.getCouponList();
		this.getUsers();
		this.srchAddr()
	},
	methods: {
		
		
		
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');
			this.uid = res.data.id;
			
			console.log('ziji :>> ', res);
		
			
		},
		dianji(sid){
			
			if (sid) {
				var sid ={
					sid: sid,
					zhuantai:2
				}
				uni.setStorageSync("sid", sid)
				this.jump('/pages/index/weihuobang')
				//this.$Router.replace('/pages/index/weihuobang')
				// uni.redirectTo({
				// 	url:"../index/weihuobang"
				// })
			
				
				
				
			}
		},
		async srchAddr() {
			console.log('this.uid :>> ', this.uid);
			console.log('this.name :>> ', this.name);
			
			const res = await this.$api('srchAddr', {
				uid :this.uid,
				name: this.name,
			});
			
			
			if (res==false) {
				return // uni.$showMsg("附近没有小区") 
			}
			
			
			
			this.data = res
			
			this.$forceUpdate()
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		getMap() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					var dizhi = res.address + res.name;
					uni.setStorageSync('dizhi', dizhi);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.page_box {
	.content {
		width: 100vw;
		height: 100vh;
		overflow: scroll;
		background-color: #ffffff;

		.top {
			margin-top: 36rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-content: center;
			image {
				width: 70rpx;
				height: 70rpx;
				margin-right: 17rpx;
			}
			text {
				height: 34rpx;
				line-height: 70rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.peisong {
			margin-top: 20rpx;
			text-align: center;
			height: 28rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.srchFor {
			width: 692rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			background: #f1f1f1;
			border: 2rpx solid #ecc177;
			opacity: 0.6;
			border-radius: 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			//margin-bottom: 21rpx;
			.tubiao {
				margin: 0 15rpx;
			}
			input {
				height: 24rpx;
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
		}
		.nearby {
			display: flex;
			align-items: center;
			width: 692rpx;
			height: 69rpx;

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin: 0 auto;
			//border-bottom: 1rpx solid #C6C4C4;
		}
		.shequ{
			height: 109rpx;
			width: 690rpx;
			margin: 0 auto;
			border-top: 1rpx solid #C6C4C4;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.view{
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					
				}
			}
			.view1 {
				height: 109rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				//align-items: center;
				text:nth-child(1){
					
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #EABA6A;

				}
				text:nth-child(2){
						
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;

				}
			}
			
		}
	}
}
</style>
